<template>
  <div style="padding:10px;">
    <div v-if="Object.keys(route.meta).length" class="bread_flex">
      <div>
        <h3>{{route.meta.title}}</h3>
      </div>
      <div style="float:right">
        <ul class="flex_ul">
          <router-link :to="data.path" tag="li" v-for="(data,index) in route.matched" :key="index">
            <i :class="data.meta.IconCls"></i>&nbsp;{{data.meta.title}}&nbsp;>&nbsp;
          </router-link>
          <!-- <li v-for="(data,index) in route.matched" :key="index">
            <i :class="data.meta.IconCls"></i>&nbsp;{{data.meta.title}}&nbsp;>&nbsp;
          </li> -->
        </ul>
      </div>
    </div>
    <h2 v-else>未配置路由标题</h2>
  </div>
  </div>
</template>
<style lang="scss" scoped>
.bread_flex {
  display: flex;
  justify-content: space-between;
}
.flex_ul {
  li {
    float: left;
    font-size: 13px;
    //transition: all 1.5s;
    // 恶搞特效
    &:hover {
      cursor: pointer;
      //color: red;
      //font-size: 20px;
      //border: 2px solid blue;
      //border-radius: 15px;
      //padding: 20px;
      //color: yellow;
      font-weight: bolder;
    }
  }
}
</style>
<script>
export default {
  data () {
    return {
      route: {}
    }
  },
  created () {
    this.route = this.$route
    console.log(this.$route)
  },
  watch: {
    '$route' (route) {
      //console.log(route)
      this.route = route
    }
  }
}
</script>